<template>
    <sky-base-page ref="skyBasePageRef" :api-obj="qly.api.order.index"
                   :params="params"
                   type="list" btnPadding="0" refresherEnabled bg-page-color="#fff">
        <template #header>
            <view class="tabs-box">
                <up-tabs :list="tabsList" :current="currentTabs" @click="tabsClick"></up-tabs>
            </view>
        </template>
        <template #default="{dataList}">
            <up-card margin="0 24rpx 18rpx" padding="24rpx" v-for="(item,index) in dataList" :key="index">
                <template #head>
                    <view class="header-box">
                        <view class="create-time">
                            {{ item.createtime_text }}
                        </view>
                        <view>{{ item.status_text }}</view>
                    </view>
                </template>
                <template #body>
                    <view class="goods-box">
                        <up-avatar shape="square" :src="item.goods_image_arr[0]" size="120rpx"></up-avatar>
                        <view class="content-box">
                            <view class="goods-name">{{ item.goods_name }}</view>
                            <view class="money-num">
                                <view>￥{{ item.goods_price }}</view>
                                <view>x{{ item.goods_num }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="money-num">
                        <view class="goods-num">
                            <view>共{{ item.goods_num }}件</view>
                        </view>
                        <view class="goods-num">
                            应付总额：￥{{ item.order_money }}
                        </view>
                    </view>
                </template>
                <template #foot>
                    <view class="btn-box">
                        <view>
                            <up-button type="primary" text="查看详情" @tap="toOrderDetail(item)"></up-button>
                        </view>
                        <view v-if="item.status==OrderStatusEnum.pendingPayment.value">
                            <up-button type="primary" text="取消订单" @tap="cancelOrderHandler(item)"></up-button>
                        </view>
                        <view v-if="item.status==='1'">
                            <up-button type="primary" text="立即支付" @tap="orderPayHandler(item)"></up-button>
                        </view>
                        <view v-if="item.deliveryFlag">
                            <up-button type="primary" text="确认发货" @tap="confirmDeliveryHandler(item)"></up-button>
                        </view>
                        <view v-if="item.receivingFlag">
                            <up-button type="primary" text="确认收货" @tap="confirmReceivingHandler(item)"></up-button>
                        </view>
                    
                    </view>
                </template>
            </up-card>
            <sky-empty v-if="dataList.length<=0" text="暂无数据"/>
        </template>
    </sky-base-page>
    
    <!--    商家确认发货-->
    <confirmDeliveryPopup ref="confirmDeliveryPopupRef" @success="getOrderList"/>
</template>
<script setup>
import {cancelOrder, orderPay,confirmReceiving} from './data'
import {DeliveryMethodEnum, OrderStatusEnum} from '@/enums/order'
import confirmDeliveryPopup from './components/confirmDeliveryPopup.vue'

const params = ref({})
const skyBasePageRef = ref()
const confirmDeliveryPopupRef = ref()

const tabsList = computed(() => {
    const list = [{
        name: '全部',
        value: ''
    }]
    if (params.value.delivery_method == DeliveryMethodEnum.express.value) {
        console.log('000',params.value.delivery_method)
        list.push(...[
            {name: '待付款', value: '1'},
            {name: '待发货', value: '2'},
            {name: '已发货', value: '3'},
            {name: '已完成', value: '5'},
            {name: '已取消', value: '6'},
            {name: '待退款/售后', value: '7'},
        ])
    } else {
        console.log('111',params.value.delivery_method)
        list.push(...[
            {name: '待付款', value: '1'},
            {name: '已发货', value: '4'},
            {name: '已完成', value: '5'},
            {name: '已取消', value: '6'},
            {name: '待退款/售后', value: '7'},
        ])
    }
    return list
})

const currentTabs=computed(()=>{
    const index=tabsList.value.findIndex(item=>item.value==params.value.status)
    return index>-1?index:0
})

const getOrderList=()=>{
    skyBasePageRef.value.refresh()
}
// tabs切换
const tabsClick = (e) => {
    params.value.status = tabsList.value[e.index].value
};

// 取消订单
const cancelOrderHandler = (item) => {
    cancelOrder(item.id, () => {
        getOrderList()
    })
}

// 订单支付
const orderPayHandler = (item) => {
    orderPay(item.id, () => {
        getOrderList()
    })
}

// 商家确认发货
const confirmDeliveryHandler = (item) => {
    confirmDeliveryPopupRef.value.open(item.id)
}


// 确认收货
const confirmReceivingHandler = (item) => {
    confirmReceiving(item.id, () => {
        getOrderList()
    })
}


// 订单详情
const toOrderDetail = (item) => {
    if(item.status==='7'){
        qly.page.open('/pages/my/order/refundInfo', {id: item.id})
    }else{
        qly.page.open('/pages/my/order/detail', {id: item.id})
    }
}

qly.page.onLoad(() => {
    uni.$on('refreshOrder',()=>{
        getOrderList()
    })
    console.log('qly.page.params',qly.page.params)
    params.value = qly.page.params
    uni.setNavigationBarTitle({
        title: params.value.delivery_method === 1 ? '自提订单' : '线上订单'
    })
})
</script>
<style scoped lang="scss">
.tabs-box {
    background-color: #fff;
    padding-bottom: 16rpx;
    margin-bottom: 18rpx;
    border-bottom: 2rpx solid #dadbde;
}

.header-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .create-time {
        font-size: 28rpx;
        color: #303133;
    }
}

.goods-box {
    display: flex;
    align-items: center;
    gap: 18rpx;
    box-sizing: border-box;
    
    .content-box {
        height: 120rpx;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .money-num {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
}

.btn-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 24rpx;
}

.money-num {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 12rpx;
    gap: 24rpx;
}
</style>
